<template>
  <div class="validate-pwd">
    <el-popover trigger="hover">
      <div class="validate-pwd">
        <div class="strength">
          <p>密码强度: {{ pwdStrength }}</p>
          <el-progress :color="customColorMethod" :show-text="false" :percentage="percentage"></el-progress>
        </div>
        <div class="pwd-rules">
          <p :class="[pwdRule1 ? 'active' : '']">
            <i class="el-icon-circle-check mr5"></i>6-20个字符
          </p>
          <p :class="[pwdRule2 ? 'active' : '']">
            <i class="el-icon-circle-check mr5"></i>只能包含数字、字母、标点符号（空格除外）
          </p>
          <p :class="[pwdRule3 ? 'active' : '']">
            <i class="el-icon-circle-check mr5"></i>数字、字母、标点符号至少包含2种
          </p>
        </div>
      </div>
      <el-input
        :type="pwdStatus ? 'password' : 'text'"
        v-model.trim="password"
        @blur="onBlurPwd"
        @input="changePwd"
        placeholder="密码"
        slot="reference"
      >
        <template slot="append">
          <i
            class="iconfont icon-yanjing pointer"
            style="font-size: 14px;"
            @click="changePwdStatus"
            v-if="pwdStatus"
          ></i>
          <i class="el-icon-view pointer" @click="changePwdStatus" v-else></i>
        </template>
      </el-input>
    </el-popover>
  </div>
</template>
<script>
export default {
  data() {
    return {
      password: '',
      percentage: 0,
      pwdStatus: true
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  watch: {
    value() {
      this.password = this.value
    }
  },
  computed: {
    pwdRule1() {
      return this.password.length >= 6 && this.password.length <= 20
    },
    pwdRule2() {
      // eslint-disable-next-line no-useless-escape
      const reg = /^([a-z0-9\.\@\!\#\$\%\^\&\*\(\)])/i
      const reg2 = /^[^ ]+$/ // 判断密码是否包含空格
      return reg.test(this.password) && reg2.test(this.password)
    },
    pwdRule3() {
      const reg = /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^./
      return reg.test(this.password)
    },
    pwdStrength() {
      if (this.percentage >= 90) {
        return '非常安全'
      } else if (this.percentage >= 80) {
        return '安全'
      } else if (this.percentage >= 70) {
        return '非常强'
      } else if (this.percentage >= 60) {
        return '强'
      } else if (this.percentage >= 50) {
        return '一般'
      } else if (this.percentage >= 25) {
        return '弱'
      } else if (this.percentage > 0) {
        return '非常弱'
      } else {
        return ''
      }
    }
  },
  methods: {
    changePwdStatus() {
      this.pwdStatus = !this.pwdStatus
    },
    changePwd() {
      let percent = 0
      // 判断密码长度
      if (this.password.length <= 4 && this.password.length > 0) {
        percent += 5
      } else if (this.password.length >= 5 && this.password.length <= 7) {
        percent += 10
      } else if (this.password.length >= 8) {
        percent += 25
      }
      console.log(percent, '0')
      // 判断密码是否包含数字
      const num = this.password.replace(/[^0-9]/ig, '')
      if (num.length === 0) {
        percent += 0
      } else if (num.length === 1) {
        percent += 10
      } else {
        percent += 20
      }
      console.log(percent, '1')
      // 判断密码是否包含字母
      const lowerCaseLetter = /[a-z]/
      const upperCaseLetter = /[A-Z]/
      if (lowerCaseLetter.test(this.password) && upperCaseLetter.test(this.password)) {
        percent += 20
      } else if (lowerCaseLetter.test(this.password) || upperCaseLetter.test(this.password)) {
        percent += 10
      } else {
        percent += 0
      }
      console.log(percent, '2')
      // 判断密码是否包含标点符号
      const pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]", 'g')
      if (pattern.test(this.password)) {
        const len = this.password.match(pattern)
        console.log(len, 'len')
        if (len.length > 1) {
          percent += 25
        } else {
          percent += 10
        }
      } else {
        percent += 0
      }
      console.log(percent, '3')
      // 判断密码是否为数字、字母、符合组合形式
      const reg = /^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i // 包含字母和数字
      const reg2 = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./])/ // 包含数字、字母和符号
      const reg3 = /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[#@*&.]).*$/ // 包含数字、大小写字母和符号
      if (reg.test(this.password)) {
        percent += 2
      } else if (reg3.test(this.password)) {
        percent += 5
      } else if (reg2.test(this.password)) {
        percent += 3
      }
      console.log(percent, '4')
      this.percentage = percent
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#f00'
      } else if (percentage < 60) {
        return '#e6a23c'
      } else {
        return '#67c23a'
      }
    },
    onBlurPwd() {
      this.$emit('setPassword', this.password)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-popover {
  p.active {
    color: #67c23a;
  }
}
</style>
